<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>组织架构</title>
  <link rel="stylesheet" href="../../yl/index.css" />
  <link rel="stylesheet" href="../../yl/style.css" />
  <link rel="stylesheet" href="../../yl/mobile.css" />
  <link rel="stylesheet" href="../../yl/easyui.css" />
  <link rel="stylesheet" href="../../yl/icon.css" />
  <link rel="stylesheet" href="../../style/pdf_viewer.min.css">
  <style>
    .custom-dialog .flex .el-descriptions--large .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
      padding: 1.8px 15px;
    }
    .custom-dialog  .el-form-item__content{
      display: block;
    }
    .el-descriptions__label {
      width: 120px;
    }

    .el-tabs {
      height: 100%;
      overflow: auto;
    }

    .el-tabs__content {
      overflow: auto;
    }

    .botton-ann {
      background-color: #eff5ff 0, #e0ecff 100%;
      padding: 8px;
      gap: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .part-diagram {
      margin: auto;
      padding: 20px;
    }

    .part-diagram ul {
      display: flex;
      position: relative;
      list-style-type: none;
      margin: 0;
      padding: 1rem 0.5rem 0rem 0.5rem;
    }

    .part-diagram ul ul::before {
      border-right: 2px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: 0;
      right: 50%;
      height: 1rem;
      width: 50%;
    }

    .part-diagram li {
      display: flex;
      flex-direction: column;
      padding: 1rem 0.5rem 0rem 0.5rem;
      position: relative;
      align-items: center;
    }

    .part-diagram li::before {
      border-right: 2px solid rgba(0, 0, 0, 1);
      border-top: 2px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: 0;
      right: 50%;
      height: 1rem;
      width: 50%;
    }

    .part-diagram li::after {
      border-top: 2px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
    }

    .part-diagram li:first-child::before,
    .part-diagram li:last-child::after {
      border-top: none;
    }

    li.part-diagram_root {
      padding: 0;
    }

    li.part-diagram_root::before {
      border-right: none;
    }

    .part-diagram_root p {
      text-align: center;
    }

    .menu-list-ul {
      display: block !important;
    }

    .menu-list-ul li {
      transform: translateX(88px);
      display: block;
      text-align: center;
    }

    .menu-list-ul::before {
      border-right: 2px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: 0;
      right: 4.1666666vw !important;
      height: 1rem;
      width: 50%;
    }

    .menu-list-ul li::after {
      border-top: 2px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: 1.6666666vw;
      right: 7.03125vw;
      width: 18%;
    }

    .menu-list-ul li::before {
      border-right: 2px solid rgba(0, 0, 0, 1);
      border-top: 0px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: -1.6666666vw;
      right: 8.333333333vw;
      height: 100%;
      width: 50%;
    }

    .menu-list-ul li:nth-child(1)::before {
      top: -0.8333333vw !important;
    }

    .cs:hover {
      width: 138px;
    }

    .bkuang {
      border: solid 3px #d9413e;
      padding: 28px 26px 8px 26px;
      background: #ffffff;
      border-radius: 12px;
      color: #000000;
      width: 170px;
      text-align: center;
      position: relative;
      /* 新增定位 */
      margin-top: -38px;
      /* 向上移动 */
    }

    .subtitle {
      color: #000000;
      font-size: 14px;
    }

    .nametitle {
      font-size: 18px;
      font-weight: bold;
    }

    .picture {
      background: #ffffff;
      width: 98px;
      height: 98px;
      border: solid 3px #d9413e;
      border-radius: 50%;
      overflow: hidden;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      display: flex;
      z-index: 99;
      /* 确保覆盖在上方 */

    }

    .child_picture {
      background: #ffffff;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      overflow: hidden;
    }

    .child_picture img {
      width: 90px;
      height: 90px;
    }

    .right {
      overflow-y: auto;
      overflow-x: hidden;
    }

    /* 遮罩层样式 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      display: none;
    }

    /* 弹窗样式 */
    .modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      background-color: white;
      border-radius: 5px;
      padding: 20px;
      z-index: 1001;
      display: none;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    /* 关闭按钮样式 */
    .close-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      cursor: pointer;
    }

    /* 表单样式 */
    .form-container {
      display: flex;
      gap: 40px;
    }

    .formtop {
      margin-top: 20px;
      padding: 0 12px;
    }

    .avatar-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 18px;
    }

    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #f0f0f0;
      margin-bottom: 10px;
      overflow: hidden;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      border: solid 1px #999999;
    }

    .upload-btn {
      background: #f0f0f0;
      color: #000000;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
    }

    .form-section {
      flex: 1;
    }

    .form-row {
      display: flex;
      margin-bottom: 15px;
    }

    .form-label {
      width: 100px;
      margin-bottom: 0;
    }

    .form-input {
      flex: 1;
    }

    .form-input input {
      width: 100%;
      padding: 8px;
      border: 1px solid #cccccc;
      border-radius: 4px;
    }

    .form-buttons {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .form-buttons button {
      margin-left: 10px;
      padding: 8px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .cancel-btn {
      background-color: #f0f0f0;
    }

    .submit-btn {
      background-color: #409eff;
      color: white;
    }

    .zoom {
      display: flex;
      position: fixed;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      height: 30px;
      width: 125px;
      right: 40px;
      background-color: #e0ecff;
      z-index: 10
    }

    .zoom .zoom-in,
    .zoom .zoom-out {
      width: 30px;
      height: 30px;
      background: #fff;
      color: #c1c1cd;
      cursor: pointer;
      background-size: 100%;
      background-repeat: no-repeat
    }

    .zoom .zoom-out {
      background-image: url(./js/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png)
    }

    .zoom .zoom-out.disabled {
      opacity: .5
    }

    .zoom .zoom-in {
      background-image: url(./js/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png)
    }

    .zoom .zoom-in.disabled {
      opacity: .5
    }
  </style>
</head>

<body>
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar">
        <div class="m-title">领导班子架构图</div>
      </div>
    </header>
    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px">
      <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
        <el-tab-pane label="架构图" name="first">
          <div class="zoom">
            <div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div>
            <span>{{ nowVal }}%</span>
            <div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div>
          </div>
          <div class="part-diagram" :style="`transform: scale(${nowVal / 100});`">
            <yl-tenure-tree v-if="isShow" @node-click="handleNode" isfirst :data="treeData"></yl-tenure-tree>
          </div>
        </el-tab-pane>
        <el-tab-pane label="列表" name="second">
          <div class="tree-scroll-wrapper"> <!-- 新增的滚动容器 -->
            <el-table tooltip-effect="dark" :data="treeData" border row-key="Tenure_Position_SerialNumber"
              default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
              <el-table-column prop="Village_Position" label="职务" min-width="150"></el-table-column>
              <el-table-column prop="Personal_Name" label="任职人员" min-width="150">
                <template v-slot="{row}">
                  {{row.Personal_Name?row.Personal_Name:'暂无任职人员'}}
                </template>
              </el-table-column>
              <el-table-column label="头像" align="center" width="130">
                <template v-slot="{row}">
                  <el-image v-if="row.Picture_URL" style="width: 100px; height: 100px" :src="photo + row.Picture_URL"
                    fit="contain"></el-image>
                  <template v-else>暂无头像</template>
                </template>
              </el-table-column>
              <el-table-column prop="Tenure" label="任期"  min-width="150"></el-table-column>
              <el-table-column prop="Village" label="村委会" min-width="150"></el-table-column>
              <el-table-column prop="Accession_Date" label="开始时间" min-width="150"></el-table-column>
              <el-table-column prop="Actual_End_Date" label="结束时间" min-width="150"></el-table-column>
              <el-table-column label="操作" fixed="right" align="center" width="100">
                <template v-slot="{row}">
                  <el-button :type="row.Party_Member_SerialNumber?'danger':'primary'" @click="handleNode(row)">
                    {{row.Party_Member_SerialNumber?'离任':'补选'}}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-dialog v-model="showDialog" :destroy-on-close="true" width="700" :close-on-click-modal="false"
        class="custom-dialog">
        <template #header>
          <div class="dialog-header">
            <span>{{form.Tenure_Status == '1'?'补选':'离任'}}</span>
          </div>
        </template>
        <el-form :model="form" ref="form" :inline-message="true" style="width: 100%">
          <div style="display: flex;" class="flex">
            <el-image v-if="form.Tenure_Status == '3'" style="width: 178px; height: 178px;flex-shrink: 0; border:1px solid #ebeef5;" :src="photo + form.Picture_URL">
              <div slot="error"  class="image-error">
                <span>图片加载失败</span>
              </div>
            </el-image>
            <yl-upload v-else style="flex-shrink: 0;" v-model="form.Picture_URL"></yl-upload>
            <el-descriptions style="width: 100%;margin-left: 10px;" :column="1" size="large" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">村委职务</div>
                </template>
                <el-form-item prop="Village_Position_SerialNumber"
                  :rules="[{ required: true, message: '请选择职务', trigger: 'change' }]">
                  <el-select disabled v-model="form.Village_Position_SerialNumber" placeholder="请选择职务" size="large">
                    <el-option v-for="(item,index) in village_position" :key="index" :label="item.Village_Position"
                      :value="item.Village_Position_SerialNumber" />
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">任期成员</div>
                </template>
                <el-form-item prop="ID_Card_Number"
                  :rules="[{ required: true, message: '请选择任期成员', trigger: 'change' }]">
                  <el-select @change="changeMember" v-model="form.ID_Card_Number" placeholder="请选择任期成员"
                    size="large">
                    <el-option v-for="(item,index) in member" :key="index" :label="item.Personal_Name"
                      :value="item.ID_Card_Number" />
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <template v-if="form.Tenure_Status == '1'">
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">就职日期</div>
                  </template>
                  <el-form-item prop="Accession_Date"
                    :rules="[{ required: true, message: '请选择就职日期', trigger: 'change' }]">
                    <el-date-picker v-model="form.Accession_Date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                      class="borderless-input" type="date" placeholder="请选择就职日期" size="large" />
                  </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">当选日期</div>
                  </template>
                  <el-form-item prop="Election_Date"
                    :rules="[{ required: true, message: '请选择当选日期', trigger: 'change' }]">
                    <el-date-picker v-model="form.Election_Date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                      class="borderless-input" type="date" placeholder="请选择当选日期" size="large" />
                  </el-form-item>
                </el-descriptions-item>
              </template>
              <template v-else-if="form.Tenure_Status == '3'">
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">实际结束日期</div>
                  </template>
                  <el-form-item prop="Actual_End_Date"
                    :rules="[{ required: true, message: '请选择实际结束日期', trigger: 'change' }]">
                    <el-date-picker v-model="form.Actual_End_Date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                      class="borderless-input" type="date" placeholder="请选择实际结束日期" size="large" />
                  </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">离任类型</div>
                  </template>
                  <el-form-item prop="Leave_Type" :rules="[{ required: true, message: '请选择离任类型', trigger: 'change' }]">
                    <el-select v-model="form.Leave_Type" placeholder="请选择离任类型" size="large">
                      <el-option
                        v-for="(item,index) in [{value:'1',label:'正常届满'},{value:'2',label:'调动'},{value:'3',label:'辞职'},{value:'4',label:'罢免'},{value:'5',label:'其他'}]"
                        :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-descriptions-item>
              </template>
            </el-descriptions>
          </div>
          <el-table v-if="form.Tenure_Status == '3'" max-height="200"  style="width: 100%" :data="attachment">
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="File_Name" label="文件名称" ></el-table-column>
            <el-table-column label="文件类型" >
              <template v-slot="{row}">
                {{row.File_Type=='0'?'会议记录':'请示批复'}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template v-slot="{row}">
                <el-button size="small" type="danger" @click="handlePreview(row)">在线预览</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-descriptions v-if="form.Tenure_Status == '1'" style="width: 100%;margin-top: 10px;" :column="1" size="large" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">会议记录</div>
              </template>
              <el-form-item prop="Children.village_organization_tenure_attachment" :rules="[{ required: true,  validator:Validity1, trigger: 'change' }]">
                <el-upload class="upload-demo" :drag="true" action="#" :auto-upload="false" :show-file-list="true"
                  :on-change="(file) => handleChange(file, '0')" :on-remove="handleRemove" :file-list="fileList1">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处上传，点击<em>提交</em>后保存</div>
                </el-upload>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">请示批复</div>
              </template>
              <el-form-item prop="Children.village_organization_tenure_attachment" :rules="[{ required: true,  validator:Validity2, trigger: 'change' }]">
                <el-upload class="upload-demo" :drag="true" action="#" :auto-upload="false" :show-file-list="true"
                  :on-change="(file) => handleChange(file, '1')" :on-remove="handleRemove" :file-list="fileList2">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处上传，待点击<em>提交</em>后保存</div>
                </el-upload>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions v-if="form.Tenure_Status == '3'" style="width: 100%;margin-top: 10px;" :column="1" size="large" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">离任附件</div>
              </template>
              <el-form-item prop="Children.village_organization_tenure_attachment" :rules="[{ required: true,  validator:Validity3, trigger: 'change' }]">
                <el-upload class="upload-demo" :drag="true" action="#" :auto-upload="false" :show-file-list="true"
                  :on-change="(file) => handleChange(file, '2')" :on-remove="handleRemove" :file-list="fileList3">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处上传，点击<em>提交</em>后保存</div>
                </el-upload>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>  
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
            <el-button type="primary" @click="handleSubmit" class="confirm-btn" :loading="loading">确认</el-button>
          </div>
        </template>
      </el-dialog>
      <yl-online-preview :file-url="fileUrl" v-model="showDialog1"></yl-online-preview>
    </div>
    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>
    </footer>
  </div>
</body>
<script src="../../yl/vue.js"></script>
<script src="../../config/config.js"></script>
<script src="../../utils/utils.js"></script>
<script src="../../utils/compressor.js"></script>
<script src="../../utils/mixins.js"></script>
<script src="../../yl/index.js"></script>
<script src="../../yl/index.iife.min.js"></script>
<script src="../../yl/jquery.min.js"></script>
<script src="../../utils/jquery.cookie.js"></script>
<script src="../../yl/zh-cn.mjs"></script>
<script src="../../yl/jquery.easyui.min.js"></script>
<script src="../../yl/jquery.easyui.mobile.js"></script>
<script src="../../yl/moment.min.js"></script>
<script src="../../api/request.js"></script>
<script src="../../utils/xlsx.full.min.js"></script>
<script src="../../utils/pdf.min.js"></script>
<script src="./js/structure.js"></script>
<!-- <script>
  // 获取DOM元素
  const resignBtn = document.getElementById('resignBtn');
  const overlay = document.getElementById('overlay');
  const modal = document.getElementById('modal');
  const closeBtn = document.getElementById('closeBtn');
  const cancelBtn = document.getElementById('cancelBtn');
  const electionForm = document.getElementById('electionForm');

  // 打开弹窗
  resignBtn.addEventListener('click', function () {
    overlay.style.display = 'block';
    modal.style.display = 'block';
  });

  // 关闭弹窗
  function closeModal() {
    overlay.style.display = 'none';
    modal.style.display = 'none';
  }

  // 点击关闭按钮关闭弹窗
  closeBtn.addEventListener('click', closeModal);

  // 点击返回按钮关闭弹窗
  cancelBtn.addEventListener('click', closeModal);

  // 点击遮罩层关闭弹窗
  overlay.addEventListener('click', closeModal);

  // 提交表单
  electionForm.addEventListener('submit', function (event) {
    event.preventDefault();
    // 获取表单数据
    const formData = {
      partyPosition: document.getElementById('partyPosition').value,
      termMember: document.getElementById('termMember').value,
      startDate: document.getElementById('startDate').value,
      electionDate: document.getElementById('electionDate').value
    };

    // 这里可以添加提交到服务器的代码
    console.log('表单数据:', formData);

    // 关闭弹窗
    closeModal();
  });
</script> -->

</html>